/* tslint:disable:jsx-no-multiline-js */
import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet } from 'react-native';
import RCDatePicker from '../../m-group/m-date-picker/DatePicker';
import PopupDatePicker from '../../m-group/m-date-picker/PopupDatePicker';
import { getComponentLocale } from '../_util/getLocale';
import { formatFn } from './utils';



export default class DatePicker extends React.Component{
  static defaultProps = {
    mode: 'datetime',
    triggerType: 'onClick',
    styles: {},
    minuteStep: 1,
  };

  static contextTypes = {
    antLocale: PropTypes.object,
  };

  render() {
    const { props, context } = this;
    const { children, value, styles } = props;
    const locale = getComponentLocale(props, context, 'DatePicker', () =>
      require('./locale/zh_CN'),
    );
    const { okText, dismissText, extra, DatePickerLocale } = locale;

    const dataPicker = (
      <RCDatePicker
        minuteStep={props.minuteStep}
        locale={DatePickerLocale}
        mode={props.mode}
        minDate={props.minDate}
        maxDate={props.maxDate}
        defaultDate={value}
        onValueChange={props.onValueChange}
      />
    );

    return (
      <PopupDatePicker
        datePicker={dataPicker}
        styles={styles}
        {...props }
        date={value}
        dismissText={this.props.dismissText || dismissText}
        okText={this.props.okText || okText}
      >
        {children &&
        React.isValidElement(children) &&
        React.cloneElement(children, {
          extra: value ? formatFn(this, value) : this.props.extra || extra,
        })}
      </PopupDatePicker>
    );
  }
}
